<script setup>
  import { inject, computed, ref } from 'vue'
  import Button from '@/components/Button.vue'
  import { PROVIDE_KEY } from '../consts'
  import FileList from '../list/FileList.vue'
  import Spacer from '../list/cells/Spacer.vue'
  import Icon from '@/components/Icon.vue'
  import {
    getNodeStatusIcon,
    getNodeStatusString,
    getTaskMainNumber,
    NODE_TYPE_LABELS,
    NODE_TYPE_SENTENCE_LABELS,
  } from '@/helpers/node'

  const props = defineProps({
    node: { type: Object, required: true },
    level: { type: Number, default: 1 },
    open: { type: Boolean, default: true },
  })

  const { onFileAdd } = inject(PROVIDE_KEY)
  const nodeStatus = computed(() => {
    return {
      icon: getNodeStatusIcon(props.node),
      css: `icon status ${props.node.status}`,
      title: getNodeStatusString(props.node),
      typeLabel: NODE_TYPE_LABELS[props.node.type_],
      longTypeLabel: NODE_TYPE_SENTENCE_LABELS[props.node.type_],
      number: getTaskMainNumber(props.node),
    }
  })

  const visible = ref(props.open)
  const toggleVisible = () => {
    visible.value = !visible.value
  }
</script>
<template>
  <tbody class="collapse_title">
    <tr>
      <td class="empty" colspan="7"></td>
    </tr>
    <tr class="row_recap">
      <Spacer v-for="i in level - 1"></Spacer>
      <td class="col_text" :colspan="7 - level">
        <h4 :title="nodeStatus.title">
          <a
            class="collapse_button"
            href="#"
            @click="() => toggleVisible()"
            :aria-expanded="visible"
          >
            <Icon css="arrow" name="chevron-down"></Icon>
            <span :class="nodeStatus.css">
              <Icon :name="nodeStatus.icon" />
            </span>
            {{ nodeStatus.typeLabel }} {{ nodeStatus.number }}
            <small>{{ node.name }}</small>
          </a>
        </h4>
      </td>
      <td class="col_actions width_four">
        <Button
          :show-label="true"
          class="btn-primary"
          label="Fichier"
          icon="plus"
          :title="'Ajouter un fichier ' + nodeStatus.longTypeLabel"
          @click="() => onFileAdd(node)"
        />
      </td>
    </tr>
  </tbody>
  <tbody class="collapse_content" v-if="visible">
    <FileList :node="node" :key="node.id" :level="1" />
  </tbody>
</template>
